<template>
  <el-container class="dashboard-container">
    <el-main>
      <!-- 欢迎卡片 -->
      <div class="welcome-card">
        <h2>欢迎使用食堂管理系统</h2>
        <p>请选择左侧菜单开始操作</p>
      </div>

      <!-- 顶部统计卡片 -->
      <div class="stats-container">
        <!-- 日期筛选区 -->
        <div class="stats-filter">
          <span class="filter-label">数据看板</span>
          <div class="date-range">
            <el-date-picker v-model="dateRange" type="date" placeholder="年/月/日" format="YYYY/MM/DD"
              value-format="YYYY/MM/DD" style="width: 140px" />
            <span class="range-separator">至</span>
            <el-date-picker v-model="endDate" type="date" placeholder="年/月/日" format="YYYY/MM/DD"
              value-format="YYYY/MM/DD" style="width: 140px" :default-value="new Date('2025/11/28')" />
            <el-button type="primary" class="query-btn">
              <el-icon>
                <Search />
              </el-icon>
              查询
            </el-button>
          </div>
        </div>

        <!-- 统计卡片区域 -->
        <el-row :gutter="20" class="stats-row">
          <!-- 今日营收 -->
          <el-col :span="6">
            <el-card class="stat-card" shadow="never">
              <div class="stat-item">
                <div class="stat-icon blue">
                  <el-icon style="font-size: 35px">
                    <Money />
                  </el-icon>
                </div>
                <div class="stat-content">
                  <div class="stat-title">今日营收</div>
                  <div class="stat-value">¥48,028.00</div>
                  <div class="stat-trend up">
                    <el-icon>
                      <ArrowUp />
                    </el-icon>
                    <span>+9.5%</span>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <!-- 今日就餐人数 -->
          <el-col :span="6">
            <el-card class="stat-card" shadow="never">
              <div class="stat-item">
                <div class="stat-icon blue">
                  <el-icon style="font-size: 35px">
                    <User />
                  </el-icon>
                </div>
                <div class="stat-content">
                  <div class="stat-title">今日就餐人数</div>
                  <div class="stat-value">298</div>
                  <div class="stat-trend up">
                    <el-icon>
                      <ArrowUp />
                    </el-icon>
                    <span>+12.7%</span>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <!-- 库存预警 -->
          <el-col :span="6">
            <el-card class="stat-card" shadow="never">
              <div class="stat-item">
                <div class="stat-icon orange">
                  <el-icon style="font-size: 35px">
                    <WarningFilled />
                  </el-icon>
                </div>
                <div class="stat-content">
                  <div class="stat-title">库存预警</div>
                  <div class="stat-value">16</div>
                  <div class="stat-subtitle">项商品</div>
                </div>
              </div>
            </el-card>
          </el-col>

          <!-- 待采购 -->
          <el-col :span="6">
            <el-card class="stat-card" shadow="never">
              <div class="stat-item">
                <div class="stat-icon blue">
                  <el-icon style="font-size: 35px">
                    <!-- 卡车图标（使用Element Plus内置图标或保持现有SVG） -->
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                      <rect x="1" y="3" width="15" height="13"></rect>
                      <polygon points="16 8 20 8 23 11 23 16 16 16 16 8"></polygon>
                      <circle cx="5.5" cy="18.5" r="2.5"></circle>
                      <circle cx="18.5" cy="18.5" r="2.5"></circle>
                    </svg>
                  </el-icon>
                </div>
                <div class="stat-content">
                  <div class="stat-title">待采购</div>
                  <div class="stat-value">7件/¥12000.0</div>
                  <div class="stat-subtitle">批次</div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 每日用餐人数趋势图表 -->
      <el-card class="chart-card">
        <template #header>
          <div class="chart-header">
            <h3>用餐人数与营收趋势</h3>
          </div>
        </template>
        <div class="chart-wrapper">
          <div id="combinedTrendChart" class="chart-content"></div>
        </div>
      </el-card>

      <!-- 营收趋势图表 -->
      <el-card class="chart-card">
        <template #header>
          <div class="chart-header">
            <h3>营收趋势(最近7天)</h3>
          </div>
        </template>
        <div class="chart-wrapper">
          <div id="revenueTrendChart" class="chart-content"></div>
        </div>
      </el-card>

      <!-- 月度经营分析对比图表 -->
      <el-card class="chart-card">
        <template #header>
          <div class="chart-header">
            <h3>月度经营分析对比</h3>
          </div>
        </template>
        <div class="chart-wrapper">
          <div id="monthlyAnalysisChart" class="chart-content"></div>
        </div>
      </el-card>

      <!-- 库存预警详情 -->
      <el-card class="data-card">
        <template #header>
          <div class="data-header">
            <h3 class="with-icon">
              <el-icon class="warning-icon">
                <WarningFilled />
              </el-icon>
              库存预警详情
            </h3>
          </div>
        </template>
        <el-table :data="inventoryWarningData" border stripe>
          <el-table-column prop="name" label="商品名称" align="left" width="300"></el-table-column>
          <el-table-column prop="currentStock" label="当前库存" align="left" width="300">
            <template #default="scope">
              <span :class="scope.row.stockClass">{{ scope.row.currentStock }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="safeStock" label="安全库存" align="left" width="300"></el-table-column>
          <el-table-column prop="warningType" label="预警类型" align="left" width="300">
            <template #default="scope">
              <el-tag :type="scope.row.tagType" size="small">
                {{ scope.row.warningType }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="action" label="建议操作" align="left" width="317">
            <template #default="scope">
              <!-- 添加点击事件，传递商品信息 -->
              <el-button type="primary" size="mini" class="quick-btn" @click="showPurchasePrompt(scope.row)">
                快速采购
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- 最近活动 -->
      <el-card class="data-card">
        <template #header>
          <div class="data-header">
            <h3>最近活动</h3>
          </div>
        </template>
        <el-table :data="recentActivities" border stripe>
          <el-table-column prop="time" label="时间" align="left" width="250"></el-table-column>
          <el-table-column prop="operation" label="操作" align="left" width="250">
            <template #default="scope">
              <div class="operation-item">
                <el-icon :class="scope.row.iconClass" size="16">
                  <component :is="scope.row.icon" />
                </el-icon>
                <span>{{ scope.row.operation }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="operator" label="操作人" align="left" width="250"></el-table-column>
          <el-table-column prop="details" label="详情" align="left"></el-table-column>
        </el-table>
      </el-card>
    </el-main>
  </el-container>
</template>

<script setup>
import { onMounted, ref, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import { ElMessageBox } from 'element-plus';
import {
  WarningFilled,
  ShoppingCart,
  ArrowUp,
  ArrowDown,
  Star,
  User,
} from '@element-plus/icons-vue';

// 新增方法：显示采购提示
const showPurchasePrompt = (item) => {
  // 计算建议采购数量（安全库存 - 当前库存）
  const currentStock = parseInt(item.currentStock);
  const safeStock = parseInt(item.safeStock);
  const suggestedQuantity = safeStock - currentStock;

  // 根据商品单位设置提示文本
  let unit = '';
  if (item.name === '土豆' || item.name === '大白菜' || item.name === '猪肉') {
    unit = 'kg';
  } else if (item.name === '食用油') {
    unit = '桶';
  } else if (item.name === '大米') {
    unit = 'kg';
  }

  // 显示弹窗提示
  ElMessageBox.confirm(
    `此网页显示<br/>建议采购 ${item.name} ${suggestedQuantity}${unit}，是否跳转到采购页面？`,
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      dangerouslyUseHTMLString: true,
      confirmButtonClass: 'el-button--primary',
      cancelButtonClass: 'el-button--default',
      center: true, // 居中显示
      customClass: 'purchase-prompt-dialog'
    }
  ).then(() => {
    // 点击确定后的处理逻辑
    console.log('跳转到采购页面');
    // 这里可以添加跳转到采购页面的代码
  }).catch(() => {
    // 点击取消后的处理逻辑
    console.log('取消操作');
  });
};

// 库存预警数据
const inventoryWarningData = ref([
  {
    name: '土豆',
    currentStock: '45kg',
    safeStock: '100kg',
    warningType: '库存不足',
    tagType: 'warning',
    stockClass: 'orange-text'
  },
  {
    name: '大白菜',
    currentStock: '25kg',
    safeStock: '80kg',
    warningType: '严重不足',
    tagType: 'danger',
    stockClass: 'red-text'
  },
  {
    name: '猪肉',
    currentStock: '15kg',
    safeStock: '50kg',
    warningType: '严重不足',
    tagType: 'danger',
    stockClass: 'red-text'
  },
  {
    name: '食用油',
    currentStock: '8桶',
    safeStock: '20桶',
    warningType: '库存不足',
    tagType: 'warning',
    stockClass: 'orange-text'
  },
  {
    name: '大米',
    currentStock: '180kg',
    safeStock: '200kg',
    warningType: '库存不足',
    tagType: 'warning',
    stockClass: 'orange-text'
  }
]);

// 最近活动数据
const recentActivities = ref([
  {
    time: '11-26 08:25',
    operation: '新增采购单',
    operator: '张采购',
    details: '采购单号: PO20231215001, 总金额: ¥12,500',
    icon: ShoppingCart,
    iconClass: 'blue-icon'
  },
  {
    time: '11-26 08:10',
    operation: '库存预警',
    operator: '系统',
    details: '土豆库存不足, 当前库存: 50kg, 安全库存: 100kg',
    icon: WarningFilled,
    iconClass: 'orange-icon'
  },
  {
    time: '11-26 07:50',
    operation: '收入入库',
    operator: '李库管',
    details: '收货单号: REC20231215001, 收货数量: 500kg',
    icon: ArrowUp,
    iconClass: 'green-icon'
  },
  {
    time: '11-26 07:35',
    operation: '物料领用',
    operator: '王糊口',
    details: '领用蔬菜类商品, 总数量: 80kg',
    icon: ArrowDown,
    iconClass: 'purple-icon'
  },
  {
    time: '11-26 07:05',
    operation: '供应商评价',
    operator: '张采购',
    details: '对新鲜蔬菜供应商进行评价, 评分: 4.5星',
    icon: Star,
    iconClass: 'yellow-icon'
  },
  {
    time: '11-26 06:35',
    operation: '用户登录',
    operator: '食堂经理',
    details: '管理员登录系统',
    icon: User,
    iconClass: 'gray-icon'
  }
]);

// 存储echarts实例，用于销毁
let diningTrendChart = null;
let monthlyAnalysisChart = null;
let combinedTrendChart = null;
let revenueTrendChart = null;

// 初始化图表
const initCharts = () => {
  // 1. 每日用餐人数趋势图表
  combinedTrendChart = echarts.init(document.getElementById('combinedTrendChart'));
  const diningDates = ['11-01', '11-02', '11-03', '11-04', '11-05', '11-06', '11-07', '11-08', '11-09', '11-10', '11-11', '11-12', '11-13', '11-14', '11-15', '11-16', '11-17', '11-18', '11-19', '11-20', '11-21', '11-22', '11-23', '11-24', '11-25', '11-26'];
  const studentData = [1200, 1400, 1600, 1800, 1900, 1850, 1700, 1500, 1400, 1600, 1700, 1800, 1900, 1850, 1900, 1750, 1800, 1900, 1800, 1700, 1600, 1800, 1900, 2000, 1950, 1750];
  const staffData = [300, 320, 350, 380, 400, 390, 370, 350, 330, 350, 360, 380, 400, 390, 400, 380, 390, 400, 390, 370, 360, 380, 400, 420, 410, 380];

  // 2. 营收趋势（最近7天）图表
  const revenueDates = ['12-09', '12-10', '12-11', '12-12', '12-13', '12-14', '12-15'];
  const revenueData = [420, 450, 430, 460, 440, 470, 480];

  // 合并图表配置
  combinedTrendChart.setOption({
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      borderColor: '#e5e6eb',
      borderWidth: 1,
      textStyle: { color: '#333', fontSize: 12 },
      formatter: function (params) {
        let res = params[0].name + '<br/>';
        params.forEach(item => {
          if (item.seriesName === '学生套餐' || item.seriesName === '教工套餐') {
            res += `${item.seriesName}: ${item.value}人<br/>`;
          } else if (item.seriesName === '营收') {
            res += `${item.seriesName}: ${item.value}万元<br/>`;
          }
        });
        return res;
      },
      extraCssText: 'box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);'
    },
    legend: {
      data: ['学生套餐', '教工套餐', '营收'],
      top: 0,
      left: 'center',
      textStyle: { color: '#666', fontSize: 12 },
      itemWidth: 12,
      itemHeight: 12
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '5%',
      top: '15%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: diningDates,
        axisLine: { lineStyle: { color: '#e5e6eb' } },
        axisLabel: {
          color: '#666',
          fontSize: 12,
          interval: 0,
          rotate: 0
        },
        axisTick: { show: false }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '用餐人数',
        nameTextStyle: { color: '#666', fontSize: 12 },
        axisLine: { lineStyle: { color: '#e5e6eb' } },
        splitLine: { lineStyle: { color: '#f2f3f5' } },
        axisLabel: {
          color: '#666',
          fontSize: 12,
          formatter: '{value}人'
        },
        max: 2500,
        interval: 500
      },
      {
        type: 'value',
        name: '营收金额(万元)',
        nameTextStyle: { color: '#666', fontSize: 12 },
        axisLine: { lineStyle: { color: '#e5e6eb' } },
        splitLine: { lineStyle: { color: '#f2f3f5' } },
        axisLabel: {
          color: '#666',
          fontSize: 12,
          formatter: '{value}万'
        },
        max: 500,
        interval: 100
      }
    ],
    series: [
      {
        name: '学生套餐',
        type: 'line',
        data: studentData,
        symbol: 'circle',
        symbolSize: 6,
        showSymbol: false,
        emphasis: { showSymbol: true },
        lineStyle: { width: 2, color: '#4E89FF' },
        itemStyle: { color: '#4E89FF' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(78, 137, 255, 0.2)' },
            { offset: 1, color: 'rgba(78, 137, 255, 0)' }
          ])
        }
      },
      {
        name: '教工套餐',
        type: 'line',
        data: staffData,
        symbol: 'circle',
        symbolSize: 6,
        showSymbol: false,
        emphasis: { showSymbol: true },
        lineStyle: { width: 2, color: '#0FC6C2' },
        itemStyle: { color: '#0FC6C2' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(15, 198, 194, 0.2)' },
            { offset: 1, color: 'rgba(15, 198, 194, 0)' }
          ])
        }
      },
    
    ]
  });

  // 营收趋势图表
  revenueTrendChart = echarts.init(document.getElementById('revenueTrendChart'));
  revenueTrendChart.setOption({
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      borderColor: '#e5e6eb',
      borderWidth: 1,
      textStyle: { color: '#333', fontSize: 12 },
      formatter: function (params) {
        let res = params[0].name + '<br/>';
        params.forEach(item => {
          res += `${item.seriesName}: ${item.value}万元<br/>`;
        });
        return res;
      },
      extraCssText: 'box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);'
    },
    legend: {
      data: ['营收'],
      top: 0,
      left: 'center',
      textStyle: { color: '#666', fontSize: 12 },
      itemWidth: 12,
      itemHeight: 12
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '5%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: revenueDates,
      axisLine: { lineStyle: { color: '#e5e6eb' } },
      axisLabel: {
        color: '#666',
        fontSize: 12
      },
      axisTick: { show: false }
    },
    yAxis: {
      type: 'value',
      name: '营收金额(万元)',
      nameTextStyle: { color: '#666', fontSize: 12 },
      axisLine: { lineStyle: { color: '#e5e6eb' } },
      splitLine: { lineStyle: { color: '#f2f3f5' } },
      axisLabel: {
        color: '#666',
        fontSize: 12,
        formatter: '{value}万'
      },
      max: 500,
      interval: 100
    },
    series: [
      {
        name: '营收',
        type: 'line',
        data: revenueData,
        symbol: 'circle',
        symbolSize: 6,
        showSymbol: false,
        emphasis: { showSymbol: true },
        lineStyle: { width: 2, color: '#FF7D00' },
        itemStyle: { color: '#FF7D00' },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(255, 125, 0, 0.3)' },
            { offset: 1, color: 'rgba(255, 125, 0, 0)' }
          ])
        }
      }
    ]
  });

  // 4. 月度经营分析对比图表
  monthlyAnalysisChart = echarts.init(document.getElementById('monthlyAnalysisChart'));
  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
  const revenue = [120, 130, 140, 125, 135, 150, 145, 135, 130, 140, 145, 150];
  const purchaseCost = [70, 75, 80, 75, 80, 85, 82, 78, 76, 80, 82, 85];
  const profit = [55, 60, 65, 60, 65, 70, 68, 65, 63, 67, 70, 72];

  monthlyAnalysisChart.setOption({
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      borderColor: '#e5e6eb',
      borderWidth: 1,
      textStyle: { color: '#333', fontSize: 12 },
      extraCssText: 'box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);'
    },
    legend: {
      data: ['营收', '采购成本', '利润'],
      top: 0,
      left: 'center',
      textStyle: { color: '#666', fontSize: 12 },
      itemWidth: 12,
      itemHeight: 12
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '5%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months,
      axisLine: { lineStyle: { color: '#e5e6eb' } },
      axisLabel: { color: '#666', fontSize: 12 },
      axisTick: { show: false }
    },
    yAxis: {
      type: 'value',
      name: '金额(万元)',
      nameTextStyle: { color: '#666', fontSize: 12 },
      axisLine: { lineStyle: { color: '#e5e6eb' } },
      splitLine: { lineStyle: { color: '#f2f3f5' } },
      axisLabel: { color: '#666', fontSize: 12 },
      max: 200,
      interval: 50
    },
    series: [
      {
        name: '营收',
        type: 'bar',
        data: revenue,
        itemStyle: { color: '#4E89FF' },
        barWidth: '20%'
      },
      {
        name: '采购成本',
        type: 'bar',
        data: purchaseCost,
        itemStyle: { color: '#0FC6C2' },
        barWidth: '20%'
      },
      {
        name: '利润',
        type: 'bar',
        data: profit,
        itemStyle: { color: '#FF7D00' },
        barWidth: '20%'
      }
    ]
  });

  // 响应窗口大小变化
  const resizeHandler = () => {
    combinedTrendChart.resize();
    revenueTrendChart.resize();
    monthlyAnalysisChart.resize();
  };
  window.addEventListener('resize', resizeHandler);

  // 组件卸载时移除监听
  onUnmounted(() => {
    window.removeEventListener('resize', resizeHandler);
  });
};

// 挂载时初始化图表
onMounted(() => {
  initCharts();
});

// 卸载时销毁echarts实例，防止内存泄漏
onUnmounted(() => {
  // Deleted:if (diningTrendChart) diningTrendChart.dispose();
  if (combinedTrendChart) combinedTrendChart.dispose();
  // Deleted:if (revenueTrendChart) revenueTrendChart.dispose();
  if (monthlyAnalysisChart) monthlyAnalysisChart.dispose();
});
</script>

<style lang="css" scoped>
/* 全局容器样式 */
.dashboard-container {
  width: 100%;
  height: 100%;
}

.stats-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.el-main {
  padding: 16px;
  background-color: #f5f5f5;
}

.filter-label {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.date-range {
  display: flex;
  align-items: center;
  gap: 10px;
}

.range-separator {
  color: #666;
  margin: 0 5px;
}

.query-btn {
  background-color: #409eff;
  border-color: #409eff;
  padding: 8px 16px;
}


/* 欢迎卡片 */
.welcome-card {
  background: white;
  padding: 30px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.welcome-card h2 {
  color: #333;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 500;
}

.welcome-card p {
  color: #666;
  font-size: 14px;
  margin: 0;
}

/* 统计卡片样式 */

.stat-card {
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  background-color: white;

  height: 100%;
  overflow: hidden;
}

.stat-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  gap: 16px;
}

.stat-icon {
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: #4E89FF;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
}

.stat-icon .el-icon {
  font-size: 20px;
}

.stat-icon.blue {
  background-color: #4E89FF;
}

.stat-icon.orange {
  background-color: #FF7D00;
}

.stat-icon.green {
  background-color: #00B42A;
}

.stat-icon.purple {
  background-color: #722ED1;
}

.stat-content {
  flex: 1;
}

.stat-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.stat-value {
  font-size: 20px;
  font-weight: 500;
  color: #333;
  margin-bottom: 4px;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #00B42A;
}

.stat-trend .el-icon {
  font-size: 12px;
}

.stat-subtitle {
  font-size: 12px;
  color: #666;
}

.stats-container {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 20px;
}

.stat-card {
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  height: 100%;
}

.stat-item {
  padding: 10px 0;
}

/* 图表卡片样式 */
.chart-card {
  margin-bottom: 20px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.chart-header {
  padding: 14px 20px;
  border-bottom: 1px solid #f2f3f5;
}

.chart-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.chart-wrapper {
  padding: 20px;
}

.chart-content {
  width: 100%;
  height: 350px;
}

/* 数据表格卡片样式 */
.data-card {
  margin-bottom: 16px;
  border: none;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.data-header {
  padding: 12px 20px;
  border-bottom: 1px solid #f2f3f5;
}

.data-header h3 {
  margin: 0;
  font-size: 15px;
  color: #333;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.warning-icon {
  margin-right: 8px;
  color: #FF7D00;
}

/* 库存预警表格样式 */
.red-text {
  color: #F53F3F;
  font-weight: 500;
}

.orange-text {
  color: #FF7D00;
  font-weight: 500;
}

.quick-btn {
  padding: 4px 12px;
  font-size: 12px;
}

/* 最近活动表格样式 */
.operation-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.blue-icon {
  color: #4E89FF;
}

.orange-icon {
  color: #FF7D00;
}

.green-icon {
  color: #00B42A;
}

.purple-icon {
  color: #722ED1;
}

.yellow-icon {
  color: #FFCC00;
}

.gray-icon {
  color: #86909C;
}

/* 表格通用样式 - 紧凑化 */
.el-table {
  --el-table-header-text-color: #666;
  --el-table-row-hover-bg-color: #f8f9fa;
  --el-table-border-color: #e5e6eb;
  font-size: 13px;
}

.el-table th,
.el-table td {
  padding: 8px 10px !important;
  font-size: 13px;
  color: #333;
}

.el-table th {
  font-weight: 500;
  background-color: #fff;
  border-bottom: 1px solid #e5e6eb;
}

.el-table .el-table__body-wrapper tbody tr {
  height: 36px !important;
}

/* 添加弹窗样式 */
.purchase-prompt-dialog {
  font-size: 14px;
}

.purchase-prompt-dialog .el-message-box__title {
  font-size: 16px;
  color: #333;
}

.purchase-prompt-dialog .el-message-box__content {
  font-size: 14px;
  color: #666;
}

.purchase-prompt-dialog .el-message-box__btns {
  margin-top: 20px;
}
</style>